<template>
  <div class="visual-box">
    <div class="header"></div>
    <div class="section">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pageRoutes: [
          {
            path: '/big-screen-ditigal',
            name: '主界面',
          },
          {
            path: '/big-screen-ditigal/devicealarm',
            name: '告警界面',
          },
          {
            path: '/big-screen-ditigal/engineer',
            name: '工程界面',
          },
          {
            path: '/big-screen-ditigal/quality',
            name: '品质界面',
          },
          {
            path: '/big-screen-ditigal/monthtotal',
            name: '月度统计',
          },
        ],
      };
    },
  };
</script>

<style lang="scss">
  .menu-list {
    text-align: center;
    margin-top: -5px;
    .menu-link {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background: #08396a;
      border-bottom: 1px solid rgba(43, 124, 181, 0.1);
      font-size: 15px;
      &:hover {
        background: rgb(74, 173, 243);
      }
    }
  }
</style>
<style lang="scss" scope>
  .visual-box {
    height: 100vh;
    // overflow: hidden;
    background: url(../image/bg.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    flex: 1;

    > .header {
      height: 109px;
      position: relative;
      text-align: center;
      background: url(../image/header.png) center center no-repeat;
      background-size: auto 100%;
      z-index: 100;

      .menu-dropdown {
        min-width: 150px;
        position: absolute;
        right: 10%;
        top: 40px;
        z-index: 10;
        color: white;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 20px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        background: url(../image/menu_bg.png) center center no-repeat;
        background-size: 100% 100%;
        .anticon {
          display: none;
        }
        // background: linear-gradient(
        //   0deg,
        //   rgba(9, 39, 64, 0) 0%,
        //   rgba(53, 172, 255, 0.7) 51%,
        //   rgba(9, 39, 64, 0.5) 100%
        // );
      }
    }

    .section {
      height: calc(100vh - 109px);
      display: flex;
      flex-direction: column;
    }
  }
</style>
